<template>
  <div class="match">
    <div class="match-map">
      <div id="container"></div>
    </div>
    <div class="match-relate" v-if="start && end && club">
      <div class="match-relate-item">
        <div class="match-relate-item-title">
          出发点：
        </div>
        <div class="match-relate-item-value">
          {{this.start}}
        </div>
      </div>
      <div class="match-relate-item">
        <div class="match-relate-item-title">
          目的地：
        </div>
        <div class="match-relate-item-value">
          {{this.end}}
        </div>
      </div>
      <div class="match-relate-item">
        <div class="match-relate-item-title">
          当前社团：
        </div>
        <div class="match-relate-item-value">
          {{club}}
        </div>
      </div>
    </div>
    <div class="match-button">
      <div ref="overlay" :class="{'match-button-overlay-active':isActive,'match-button-overlay':true}"></div>
      <span @touchend="handleMatch">匹配</span>
    </div>
    <van-popup v-model:show="isResult" position="bottom" round>
      <div class="match-result">
        <div class="match-result-filter">
          <div>全部结果</div>
        </div>
        <div class="match-result-content">
          <ActivityCard
            v-for="(item,index) in activity"
            :key="index"
            :activityCover="item.coverUrl"
            :content="item.content"
            :club="item.club"
            :startTime="item.startTime"
            :endTime="item.endTime"
            :positionDetail="item.positionDetail"
            :position="item.position"
            size="small"
            toHereButton="true"
            @toHere="toHere"
          />
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { Popup } from "vant";
import ActivityCard from "@/components/ActivityCard.vue";
import { getActivity } from "@/service/user";
export default {
  mounted(){
    let point = new BMap.Point(116.404, 39.915);
    let top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_SMALL});
    this.map = new BMap.Map('container');
    this.map.centerAndZoom(point,15);
    this.map.addControl(top_right_navigation); 
    let that = this;
    navigator.geolocation.getCurrentPosition(function(position){
      var x = position.coords.longitude;
      var y = position.coords.latitude;
      let gpsPoint = [new BMap.Point(x,y)];
      let convertor = new BMap.Convertor();
      convertor.translate(gpsPoint,1,5,(data)=>{
        point = data.points[0];
        let mk = new BMap.Marker(point);
        that.map.addOverlay(mk);
        that.map.panTo(point);
        that.myPoint = point;
      })
    })

    getActivity().then(res=>{
      this.activity = res;
    })
  },
  components:{
    [Popup.name]:Popup,
    ActivityCard,
  },
  methods:{
    addMarker(point,index){
      let myIcon = new BMap.Icon('markers,png',new BMap.Size(23,25),{
        anchor:new BMap.Size(10,25),
        imageOffset:new BMap.Size(0,0 - index * 25)
      })
      let marker = new BMap.Marker(point,{icon:myIcon});
      this.map.addOverlay(marker);
    },
    handleMatch(){
      if(!this.isActive){
        this.$refs.overlay.style.transitionDuration = '1s'
        this.isActive = true;
        setTimeout(()=>{
          this.$refs.overlay.style.transitionDuration = '0s'
          this.isActive = false;
          this.isResult = true;
        },1000)
      }
    },
    toHere(arg){
      let point = arg.pos;
      this.club = arg.club.clubName;
      let thePoint = new BMap.Point(point.lng,point.lat);
      this.map = new BMap.Map('container');
      this.map.centerAndZoom(thePoint, 16);
      this.map.addOverlay(new BMap.Marker(thePoint));
      this.isResult = false;
      this.driving = new BMap.DrivingRoute(this.map,{
        renderOptions:{
          map:this.map,
          autoViewport:true
        }
      })
      this.driving.search(this.myPoint,thePoint);
      let top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_SMALL});
      this.map.addControl(top_right_navigation); 

      let myGeo = new BMap.Geocoder({extensions_town:true});
      let that = this;
      myGeo.getLocation(this.myPoint,function(result){
        if(result){
          that.start = result.address;
        }
      })
      myGeo.getLocation(thePoint,function(result){
        if(result){
          that.end = result.address;
        }
      })
    }
  },
  data(){
    return {
      map:null,
      isActive:false,
      isResult:false,
      activity:[],
      myPoint:{},
      driving:{},
      start:"",
      end:"",
      club:""
    }
  }
}
</script>
<style lang="less">
.match{
  .match-map{
    height: calc(100vh - 3.125rem);
    #container{
      height: 100%;
    }
  }
  .match-relate{
    position: fixed;
    background: rgba(255,255,255,.8);
    -webkit-box-shadow: 1px 1px 2px rgb(0 0 0 / 40%);
    inset:10px 10px auto auto;
    .match-relate-item{
      display: flex;
      text-align: left;
      >div{
        padding: 8px;
        &:nth-child(1){
          width: 80px;
          font-weight: 800;
        }
      }
      .match-relate-item-value{
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex:1;
      }
    }
  }
  .match-button{
    position: fixed;
    width: 4.375rem;
    height: 4.375rem;
    line-height: 4.375rem;
    color: #fff;
    font-weight: 600;
    font-size: 1.25rem;
    background: orange;
    z-index: 11;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
  }
  .match-button-overlay{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 0%;
    height: 0%;
    z-index: -999;
    background: orange;
    transition-property: width height background;
    transition-duration: 1s;
    border-radius: 50%;
  }
  .match-button-overlay-active{
    width: 2000%;
    height: 2000%;
    background: rgba(126, 87, 14, 0);
    z-index: -9999;
  }
  .match-result{
    width: 100vw;
    height: 90vh;
    background: #F6F7F9;
    display: flex;
    flex-direction: column;
    
    .match-result-filter{
      margin: 12px 12px 0 12px;
      overflow: hidden;
      border: 1px solid orange;
      display: flex;
      justify-content: center;
      border-radius: 100px;
      div{
        padding: 8px;
        flex: 1;
        text-align: center;
        &:nth-child(1){
          font-weight: 600;
          background: #FFE7BA;
        }
      }
    }
    .match-result-content{
      margin: 8px 0;
      overflow-y: auto;
      flex:1;
    }
  }
}
</style>